<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <title>关系图</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%;height: 100%;"></div>
<button style="position: fixed;left: 20px;top: 100px;width: 200px" onclick="test()">测试</button>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var itemCounts = 100;
    var categories = [];
    for (var i = 0; i < itemCounts; i++) {
        categories[i] = {
            name: '服务' + i
        };
    }
    var datas = [];
    for (var i = 0; i < itemCounts; i++) {
        datas[i] = {
            name: "服务" + i,
            x: 20 * (i + 1),
            y: 10,
            value: i,
            draggable: true,
            category: '服务' + i
        };
    }
    var links = [];
    var index = 0;
    for (var i = 0; i < datas.length; i++) {
        if (i < datas.length - 1) {
            links[index++] = {"source": datas[i].name, "target": datas[i + 1].name};
        }
        else {
            links[index++] = {"source": datas[i].name, "target": datas[0].name};
        }
        /*for (var j = 1; j < datas.length; j++) {
            links[index++] = {"source": datas[i].name, "target": datas[8].name};
            links[index++] = {"source": datas[i].name, "target": datas[j].name};
        }*/
    }

    var option = {
        title: {
            text: "服务调用拓扑",
            subtext: "自定义视图名称",
            top: "top",
            left: "center"
        },
        legend: [{
            tooltip: {
                show: true
            },
            selectedMode: 'false',
            bottom: 20,
            data: categories.map(function (c) {
                return c.name;
            })
        }],
        toolbox: {
            show: true,
            feature: {
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        series: [
            {
                name: "服务拓扑",
                type: "graph",
                layout: "force",
                force: {
                    initLayout: "circular",
                    repulsion: 1000,
                    layoutAnimation: true
                },
                symbol: 'rect',
                symbolSize: function (value, params) {
                    var rate = 1 + value / itemCounts;
                    return [40 * rate, 20 * rate];
                },
                label: {
                    normal: {
                        show: true
                    }
                },
                edgeSymbol: ['', 'arrow'],
                coordinateSystem: null,//坐标系统
                data: datas,
                links: links,
                categories: categories,
                roam: true,//平移缩放
            }
        ]
    };
    myChart.setOption(option);

    function test() {

    }
</script>
</body>
</html>